<template>
  <div class="parkmain">
    请选择小区：<el-select v-model="value" placeholder="请选择小区" @change="chaValue">
      <el-option v-for="item in houseArr" :key="item.vid" :label="item.vname" :value="item.vid">
      </el-option>
    </el-select>
    <div class="shop">
      <el-empty description="加载中..." v-if="empty"></el-empty>
      <el-row :gutter="20">
        <el-col :span="8" v-for="item in parkArr" :key="item.id">
          <div class="shopinfo">
            <div>所在位置：{{ adress }}</div>
            <div>车位编号：{{ item.pid }}</div>
            <div>车位状态：{{ parkingStatus(item.state) }}</div>
            <div>价格：{{ item.price }}￥</div>
            <div>备注：{{ item.note }}</div>
            <div class="buy"><span @click="buyPark(item)">购买</span></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="订购车位" :visible.sync="buyVisible" width="30%">
      <span>确定要购买 "{{ adress + "--" + buyParkInfo.pid }}号" 车位</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="buyVisible = false">取 消</el-button>
        <el-button type="primary" @click="buytrue">支付定金</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      houseArr: [],
      value: "",
      parkArr: [],
      adress: "",
      buyVisible: false,
      buyParkInfo: {},
      empty: true,
    };
  },
  mounted() {
    setTimeout(() => {
      this.getHouse();
    }, 500);
  },
  methods: {
    buytrue() {
      this.$http
        .post(this.baseURL + "/order/putOrder", {
          uid: JSON.parse(sessionStorage.getItem("userinfo")).uid,
          vid: this.buyParkInfo.vid,
          pid: this.buyParkInfo.pid,
          price: this.buyParkInfo.price
        })
        .then((res) => {
          console.log(res.data)
          if(res.data.flag) {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "success",
            });
            this.chaValue(this.value);
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "error",
            });
          }
        });
      this.buyVisible = false;
    },
    buyPark(val) {
      if (val.state == -1 || val.state == 0) {
        this.$message({
          showClose: true,
          message: "该车位已被预购或购买！",
          type: "error",
        });
      } else {
        this.buyVisible = true;
        this.buyParkInfo = val;
      }
    },
    getHouse() {
      this.$http
        .get(this.baseURL + "/village/findByUID", {
          params: {
            id: JSON.parse(sessionStorage.getItem("userinfo")).uid,
          },
        })
        .then((res) => {
          this.houseArr = res.data.data;
          this.value = res.data.data[0].vid;
          this.chaValue(this.value);
          this.empty = false;
        });
    },
    parkingStatus(status) {
      if (status == 1) {
        return "车位在售";
      } else if (status == -1) {
        return "车位已售出";
      } else if (status == 0) {
        return "车位已预定";
      } else {
        return "未知";
      }
    },
    chaValue(val) {
      for (const i in this.houseArr) {
        if (this.houseArr[i].vid == val) {
          this.adress =
            this.houseArr[i].vplace +
            "--" +
            this.houseArr[i].vname;
        }
      }
      this.$http
        .get(this.baseURL + "/parking/findByVID", {
          params: {
            id: val,
          },
        })
        .then((res) => {
          this.parkArr = res.data.data;
        });
    },
  },
};
</script>

<style lang="less" scope>
.parkmain {
  padding: 0 50px;

  .shop {
    margin-top: 15px;

    .shopinfo {
      font-size: 14px;
      font-weight: 700;
      border: 2px solid #bbb;
      padding: 5px 20px;
      border-radius: 20px;
      margin-bottom: 10px;
      box-shadow: 3px 3px 9px #999;

      div {
        margin: 10px 0;
      }

      .buy {
        color: brown;
        border-top: 1px dashed #000;
        text-align: right;
        font-size: 16px;
        margin: 0;
        line-height: 30px;

        span {
          cursor: pointer;
        }
      }
    }
  }
}
</style>